
<template>
    <div  class="app-container">
        <div class="header"> 新增出库订单 </div>
        <div class="form-container">
          <div class="form">
            <el-form :model="inOrderForm" status-icon :rules="rules" ref="inOrderForm" label-width="100px">

                  
                <el-form-item label="产品" prop="product.id">
                  <el-select v-model="inOrderForm.product.id" 
                    clearable filterable placeholder="请选择产品" 
                    @change="handleSelectProduct">
                      <el-option
                        v-for="item in products"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                        <span style="float: left">{{ 'ID: ' + item.id }}</span>
                        <span style="float: right;  font-size: 14px">{{ item.name }}</span>
                      </el-option>
                  </el-select>
                </el-form-item>

                <!-- <el-form-item label="供应商" prop="supplier.id">
                  <el-select v-model="inOrderForm.supplier.id" clearable filterable placeholder="请选择供应商">
                      <el-option
                        v-for="item in suppliers"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                        <span style="float: left">{{ 'ID: ' + item.id }}</span>
                        <span style="float: right;  font-size: 14px">{{ item.name }}</span>
                      </el-option>
                  </el-select>
                </el-form-item> -->

                <el-form-item label="产品价格(元)" prop="product.price">
                    <el-col :span="18">
                      <el-input placeholder="请选择产品" v-model="inOrderForm.product.price" :disabled="true"/>
                    </el-col>
                </el-form-item>

                <el-form-item label="数量" prop="num">
                    <el-col :span="18">
                      <el-input-number v-model="inOrderForm.num" 
                        @change="handleInputNum"
                        :min="1" :max="100000" >
                        </el-input-number>
                    </el-col>
               
                </el-form-item>

                <el-form-item label="总花费(元)" prop="totalMoney">
                    <el-col :span="18">
                      <el-input placeholder="请选择产品和输入数量" v-model="inOrderForm.totalMoney" :disabled="true"/>
                    </el-col>
                </el-form-item>

                <el-form-item label="创建人" prop="user.id">
                  <el-select v-model="inOrderForm.user.id" clearable filterable placeholder="请选择类型">
                      <el-option
                        v-for="item in users"
                        :key="item.id"
                        :label="item.username"
                        :value="item.id">
                        <span style="float: left">{{ 'ID: ' + item.id }}</span>
                        <span style="float: right;  font-size: 14px">{{ item.username }}</span>
                      </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm('inOrderForm')">立即创建</el-button>
                    <el-button @click="resetForm('inOrderForm')">重置</el-button>
                </el-form-item>

            </el-form>
          </div>
        </div>
  </div>
</template>

<script>

import rules  from "@/data/inOrderRules"
  export default {
    data() {
      return {
        users:[],
        products:[],
        suppliers:[],
        inOrderForm: {
          user:{
            id:1,
          },
          product:{
            id:'',
            price:''
          },
          supplier:{
            id:''
          },
          num: 1,
          isIn:1, // 代表出的操作
          isCheck:0,// 代表是否 录入的单
          totalMoney:''
        },
        rules,
      };
    },
    methods: {
      async getData() {  
        // 获取用户角色列表
        let res = await this.$store.dispatch('user/getList',{username:'',roleId:'',storeId:'',status:''}) 
        if(res.code == 1) {
            this.users = res.data
        }else{
            this.$message({ showClose: true,message: res.msg, type: 'error'})
        }
        // 获取产品列表
        res = await this.$store.dispatch('product/getList',{name:'',typeId:''}) 
        if(res.code == 1) {
            this.products = res.data
        }else{
            this.$message({ showClose: true,message: res.msg, type: 'error'})
        }
        // // 获取供应商列表
        // res = await this.$store.dispatch('supplier/getList',{name:''}) 
        // if(res.code == 1) {
        //     this.suppliers = res.data
        // }else{
        //     this.$message({ showClose: true,message: res.msg, type: 'error'})
        // }
      },
      submitForm(formName) {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            const {msg} = await this.$store.dispatch('storeManage/addStoreManage',this.inOrderForm)
            this.$message({ showClose: true, message: msg, type: 'success' })
            this.$refs[formName].resetFields();
          } else {
            this.$message({ showClose: true, message: '请输入填写合法的表单数据', type: 'error' })
            return false;
          }
        });
      },
      handleInputNum(){
         let {product,num} = this.inOrderForm
         if(product.price != "") {
           this.inOrderForm.totalMoney = parseInt(num) * parseFloat(product.price)
         }
      },
      handleSelectProduct(){

        let productId = this.inOrderForm.product.id;
          // 根据 id 寻找数据在 数组中的 下标
          const index = this.products.map(item => item.id).indexOf(productId)
          const price = this.products[index].price   
          console.log(price);
          this.inOrderForm.product.price = price   
          this.inOrderForm.totalMoney = price *  this.inOrderForm.num
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.$message({ showClose: true,  message: '重置成功',type: 'success'})
      }
    },
    mounted() {
      this.getData();
    }
  }
</script>


<style lang="scss" scoped>
    .app-container{
        position: absolute;
         left: 0;
         right: 0;
        padding: 30px;
        background-size: cover;
        height: 100%;
        background-attachment: fixed;
        background-image: url(https://cdn.jsdelivr.net/npm/kang-static/home/assets/bg/033.jpg);
        background-repeat: no-repeat;
            
        .header{
            text-align: center;
            z-index: -999;
            margin-bottom: 20px;
            font-size: 20px;
            color: #606266;
            font-weight: 700;
        }
        .form-container{
            display: flex;
            justify-content: center;
            align-items:center;
            padding-top: 30px;
            width: 500px;
            margin: 0 auto;
            border-radius: 5px;
            background: hsla(0,0%,100%,.5);
            box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
        }
        .form{
            width: 400px;
        }
    }
</style>